<template>
  <div class="v-bottom-two" v-show="bottomTwoShow">

      <div class="sectionBtnsBox ctv" v-show="handleBottomBox.sixView.flag">
        <div class="itemBtn" :class="{active:handleBottomBox.sixView.activeSixViewIndex ===1}" @click="$emit('sixView', 1)">
          <i class="amsp el-amsp-shituzhushitu"></i><span class="vbt-name">正视图</span>
        </div>
        <div class="itemBtn" :class="{active:handleBottomBox.sixView.activeSixViewIndex ===2}" @click="$emit('sixView', 2)">
          <i class="amsp el-amsp-shituhoushitu"></i><span class="vbt-name">后视图</span>
        </div>
        <div class="itemBtn" :class="{active:handleBottomBox.sixView.activeSixViewIndex ===3}" @click="$emit('sixView', 3)">
          <i class="amsp el-amsp-shituzuoshitu"></i><span class="vbt-name">左视图</span>
        </div>
        <div class="itemBtn" :class="{active:handleBottomBox.sixView.activeSixViewIndex ===4}" @click="$emit('sixView', 4)">
          <i class="amsp el-amsp-shituyoushitu"></i><span class="vbt-name">右视图</span>
        </div>
        <div class="itemBtn" :class="{active:handleBottomBox.sixView.activeSixViewIndex ===5}" @click="$emit('sixView', 5)">
          <i class="amsp el-amsp-shitufushitu"></i><span class="vbt-name">俯视图</span>
        </div>
        <div class="itemBtn" :class="{active:handleBottomBox.sixView.activeSixViewIndex ===6}" @click="$emit('sixView', 6)">
          <i class="amsp el-amsp-shituyangshitu"></i><span class="vbt-name">仰视图</span>
        </div>
      </div>

      <div class="sectionBtnsBox ctv" v-show="handleBottomBox.ctView.flag">
        <div class="itemBtn" :class="{active: handleBottomBox.ctView.curXYZ == 'Y'}" @click="$emit('ctView', 'Y')">
          <i class="amsp el-amsp-shituzuoshitu"></i><span class="vbt-name">XZ</span>
        </div>
        <div class="itemBtn" :class="{active: handleBottomBox.ctView.curXYZ == 'X'}" @click="$emit('ctView', 'X')">
          <i class="amsp el-amsp-shituzhushitu"></i><span class="vbt-name">YZ</span>
        </div>
        <div class="itemBtn" :class="{active: handleBottomBox.ctView.curXYZ == 'Z'}" @click="$emit('ctView', 'Z')">
          <i class="amsp el-amsp-shitufushitu"></i><span class="vbt-name">XY</span>
        </div>
      </div>

      <div class="colorBox" v-show="handleBottomBox.curImg.flag">
        <div class="iptBox">
          <div class="name">
            <i class="amsp" :class="ct.isPlay?'el-amsp-zanting1':'el-amsp-bofang'" style="font-size: 28px;cursor: pointer;" @click="$parent.goPlay"></i>
          </div>
          <el-slider class="ipt" :min="1" :max="ctMax" :show-tooltip="false" v-model="ct[`index${handleBottomBox.ctView.curXYZ}`]" @input="$parent.setIndex"></el-slider>
        </div>
        <div class="iptJump">
          跳到
          <el-input :min="1" :max="ctMax" type="number" v-model.number="ct[`index${handleBottomBox.ctView.curXYZ}`]" @blur="$parent.onBlur" placeholder="请输入"></el-input>
          张
          <!-- <i class="amsp el-amsp-liangdu-"></i> -->
        </div>
      </div>
      <div class="colorBox" v-show="handleBottomBox.brightnessFrom.flag">
        <div class="iptBox">
          <div class="name">亮度</div>
          <el-slider class="ipt" :min="-100" :max="100" :show-tooltip="false" v-model="handleBottomBox.brightnessFrom.val" @input="$parent.setBrightness"></el-slider>
        </div>
      </div>
      <div class="alphaBox" v-show="handleBottomBox.contrastFrom.flag">
        <div class="iptBox">
          <div class="name">对比度</div>
          <el-slider class="ipt" :min="-200" :max="200" :show-tooltip="false" v-model="handleBottomBox.contrastFrom.val" @input="$parent.setContrastFrom"></el-slider>
        </div>
      </div>
  </div>
</template>

<script>
  
export default {
  components: {
  },
  props: ['handleBottomBox', 'ct',],
  data() {
    return {
    }
  },
  computed: {
    ctMax () {
      return this.ct[`images${this.handleBottomBox.ctView.curXYZ}`].length==0?1:this.ct[`images${this.handleBottomBox.ctView.curXYZ}`].length
    },
    bottomTwoShow () {
      let flag = false
      for (let a in this.handleBottomBox) {
        if (this.handleBottomBox[a].flag) { flag = true }
      }
      return flag
    },
  },
  created() {},
  mounted() {},

  methods:{

  }
}
</script>
<style scoped lang="less">
.v-bottom-two {
  background-color: rgba(0, 0, 0, 0);
  .iptJump {
    color: #fff;
    text-align: right;
    font-size: 12px;
    .el-input {
      width: 60px;
      /deep/.el-input__inner {
        text-align: center;
        background-color: transparent;
        border: 1px solid #fff;
        border-radius: 0;
        color: #fff;
        font-size: 12px;
        height: 20px !important;
        line-height: 20px !important;
      }
    }
  }
  .sectionBtnsBox.ctv {
    .itemBtn {
      color: #fff;
    }
  }
}
.v-bottom-two .iptBox .name {
  color: #fff !important;
}
</style>